<template>
	<view class="page">
		<view class="wrapper">
			<view class="flex">
				<image class="img" :src="'../../static/images/'+type+'.png'" mode="aspectFill"></image>
				
				<view class="qrimg">
					<tki-qrcode v-if="ifShow" cid="qrcode" ref="qrcode" :val="val" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
				</view>
				
				<view class="border">
					<view class="code">
						{{code}}
					</view>
					<view class="btn" @click="copy">
						复制
					</view>
				</view>
				
				<view class="text-white margin-top" v-show="type=='usdt'">
					充值方式：erc20
				</view>
			</view>
			
			<view class="tishi">
				<view class="text-white">
					温馨提示
				</view>
				<view class="p">
					请勿向上述地址转入任何非{{type}}资产，否则资产将不可找回转入后需要整个网络节点确认，请您耐心等待!
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		data() {
			return {
				ifShow: true,
				val: '', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				code: ''
			}
		},
		onLoad(opt) {
			this.type = opt.type
		},
		onShow() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$u.get('/finance/recharge/address?type='+this.type).then(res => {
					this.val = res.data.result.address
					this.code = res.data.result.address
					
					setTimeout(() => {
						this.creatQrcode();
					}, 500)
				})
			},
			qrR(res) {
				this.src = res
			},
			creatQrcode() {
				this.$refs.qrcode._makeCode()
			},
			copy() {
				uni.setClipboardData({
					data: this.code,
					success: () => {
						uni.showToast({
						    title: '复制成功',
						    duration: 1000
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-flow: column;
		align-items: center;
		.img {
			width: 100rpx;
			height: 100rpx;
			margin: 60rpx 0;
		}
		.qrimg {
			padding: 30rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
		.border {
			margin-top: 50rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			min-width: 600rpx;
			border: 1px solid #fff;
			padding: 16rpx;
			.btn {
				color: #089C70;
			}
		}
	}
	
	.code {
		max-width: 500rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tishi {
		line-height: 1.8;
		font-size: 26rpx;
		margin-top: 100rpx;
		.p {
			padding-left: 1em;
			line-height: 1.8;
			text-indent: -1em;
		}
	}
</style>
